<!-- 界面布局,展示标签 -->
<template>
    <div>
        <h2>第一个Vue3.0页面</h2>
        <div>
            <p>姓名：{{userName}}</p>
            <p>姓名：<span v-text="userName"></span></p>
        </div>
        <div>
            <p>学生信息</p>
            <p>姓名：{{ Student.name }}</p>
            <p>性别:{{ Student.gender?"女":"男" }}</p>
            <p>年龄:{{ Student.age }}</p>
            <p>手机号码:{{ Student.phone }}</p>
        </div>
        <p>********************************************************</p>
        <p>
            <button class="btn btn-primary" v-on:click="change()">修改姓名为:赵六</button>
        </p>
        <table class="table" style="width: 500px;">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>
                        <input type="text" v-model="Student.name" class="form-control" >
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <label>
<input type="radio" v-bind:value="false" v-model="Student.gender">男
                        </label>
                        <label>
<input type="radio" v-bind:value="true" v-model="Student.gender">女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td>
                        <input type="text" v-model="Student.age" class="form-control" >
                    </td>
                </tr>
                <tr>
                    <td>手机号码</td>
                    <td>
                        <input type="text" v-model="Student.phone" class="form-control" >
                    </td>
                </tr>
            </tbody>
        </table>
        <h2>购买的商品列表</h2>
        <table class="table table-bordered text-center">
            <tbody>
                <tr class="bg-primary">
                <td>商品名称</td>
                <td>单价</td>
                <td>购买数量</td>
            </tr>
            <tr v-for="item in goodsLiset" :key="item.id" >
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.count}}</td>
            </tr>
            </tbody>
        </table>
        <h2>省份</h2>
        <select>
            <option value="">请选择</option>
            <option v-for="item in ProvinceList":key="item.id" v-bind:value="item.id">{{item.Pname}}</option>
            
        </select>
        
    </div>
</template>
<!-- 程序操作 -->
 <!-- 安装语言 -->
 <script setup lang="ts">
// 用户姓名
import { ref, reactive, onMounted } from 'vue'
// 引入样式
import "bootstrap/dist/css/bootstrap.min.css"
//引入组件
// 变量姓名
const userName = ref("张三")
// 学生信息
const Student = reactive({
    name: "李四",
    gender: false,
    age: 22,
    phone: "13988770099",
    
})
//商品列表
const goodsLiset = ref([
    {
        id:1,
        name: "可口可乐",
        price: 3,
        count:2
    },
    {
        id:2,
        name: "面包",
        price: 6,
        count:3
    },
    {
        id:3,
        name: "双汇火腿肠",
        price: 3.5,
        count:4
    },
])
//省份
const ProvinceList = ref([
    {
        id: 1,
        Pname:"北京市"
    },
    {
        id: 2,
        Pname:"天津市"
    },
    {
        id: 3,
        Pname:"河北市"
    },
    {
        id: 4,
        Pname:"辽宁市"
    },
])
// 方法
// 修改姓名为：赵六
const change = () => {
    Student.name ="赵六"
}



</script>

<!-- 样式 -->
 <style>
</style>